<template>
  <div>
    <el-form :model="form" ref="form" :rules="rules" class="demo-ruleForm register-box">
      <h3 class="register-title">用户注册</h3>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" type="text" maxlength="20" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password" maxlength="20" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="rePwd">
        <el-input v-model="form.rePwd" type="password" maxlength="20" placeholder="请确认密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="margin-left:30px;" @click="login('form')">注册</el-button>
        <router-link to="/login">
          <el-button style="margin-left:120px;" type="success">登陸</el-button>
        </router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Register",
  methods: {
    login:function(formName ){
         this.$refs[formName].validate(valid => {
        if (valid) {

            let that=this; // 是为了axios  catch  准备的  catch 里面 this  失效了  
            //验证通过   请求axios
          this.axios({
            method: "post",
            url: "/api-user/register",
            params: {
              userName: this.form.username,
              password: this.form.password
            }
          }).then(result => {
            let data = result.data;
            if (data.status) {
            this.successMsg(data.message,this)
            }else{ 
                 this.warningMsg(data.message,this)
            }      
                       
            //请求失败
          }).catch(function(){
          this.warningMsg("网络延迟")
          });
        }
      });
    }
  },

  data() {
    //rule  callback 都要传入
    var checkPass = (rule, value, callback) => {
      if (this.form.password != value) {
        this.form.rePwd = null;
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      form: {
        username: "",
        password: "",
        rePwd: ""
      },

      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "密码长度必须在3-20之间",
            trigger: "blur"
          }
        ],
        //判断密码是否一致 checkPass 方法
        rePwd: [
          { validator: checkPass, trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "密码长度必须在3-20之间",
            trigger: "blur"
          }
        ]
      }
    };
  }
};
</script>
<style scoped>
.register-box {
  width: 350px;
  margin: 180px auto;
  border: 1px solid #dcdfe6;
  padding: 35px;
  border-radius: 5px;
  box-shadow: 0 0 25px #dcdfe6;
}
.register-title {
  text-align: center;
}
</style>